<template>
  <div class="container">
    <!-- 地图容器 -->
    <div id="mapView" class="map-container"></div>

    <!-- 左侧统计图 -->
    <div
      class="chart-container left-chart"
      :style="{
        width: leftWidth,
        height:leftheight,
        opacity: chartOpacity
      }"
      @mousedown.stop
    >
      <div class="chart-controls">
        <i class="el-icon-minus" v-show="!isLeftCollapsed" @click="toggleCollapse('left')"></i>
        <i class="el-icon-copy-document" v-show="isLeftCollapsed" @click="toggleCollapse('left')"></i>
      </div>
      <div v-show="!isLeftCollapsed" id="leftChart" class="chart"></div>
    </div>

    <!-- 右侧统计图 -->
    <div
      class="chart-container right-chart"
      :style="{
        width: rightWidth,
        height:rightheight,
        opacity: chartOpacity
      }"
      @mousedown.stop
    >
      <div class="chart-controls">
        <i class="el-icon-minus" v-show="!isRightCollapsed" @click="toggleCollapse('right')"></i>
        <i class="el-icon-copy-document" v-show="isRightCollapsed" @click="toggleCollapse('right')"></i>
      </div>
      <div v-show="!isRightCollapsed" id="rightChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import { loadModules } from 'esri-loader';
import * as echarts from 'echarts';
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";

export default {
  data() {
    return {
      mapView:undefined,
      chartOpacity: 0.9,
      // 左侧图表状态
      leftWidth: '25%',
      leftheight:'calc(100vh - 100px)',
      isLeftCollapsed: false,
      // 右侧图表状态
      rightWidth: '25%',
      rightheight:'calc(100vh - 100px)',
      isRightCollapsed: false,
    };
  },
  mounted() {
    this.initMap();
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    async initMap() {
      const options = { version: '4.24' };
      const [Map, MapView] = await loadModules(
        ['esri/Map', 'esri/views/MapView'],
        options
      );
      const featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2"
      });
      const map = new Map({
        basemap: 'streets-vector',
        layers: [featureLayer]
      });

      this.mapView = new MapView({
        container: 'mapView',
        map: map,
        // center: [87.614396, 43.821551], //wulumuqi
        center: [-73.95, 40.702], //featureLayer
        zoom: 10
      });
      const template = {
        // NAME and COUNTY are fields in the service containing the Census Tract (NAME) and county of the feature
        title: "{NAME} in {COUNTY}",
      };

    },

    initCharts() {
      // 使用ECharts初始化图表
      const initChart = (id, option) => {
        const chart = echarts.init(document.getElementById(id));
        chart.setOption(option);
        return chart;
      };

      // 左侧柱状图
      initChart('leftChart', {
        title: { text: '区域统计' },
        xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ type: 'bar', data: [10, 22, 28, 43, 49] }]
      });

      // 右侧饼图
      initChart('rightChart', {
        title: { text: '比例分布' },
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: '类别1' },
            { value: 310, name: '类别2' },
            { value: 234, name: '类别3' }
          ]
        }]
      });
    },

    toggleCollapse(side) {
      console.log(this[`is${side.charAt(0).toUpperCase() + side.slice(1)}Collapsed`]);
      if(!this[`is${side.charAt(0).toUpperCase() + side.slice(1)}Collapsed`]){
        this[`${side}height`] = '50px'
        this[`${side}Width`] ='60px'
      }else{
        this[`${side}height`]  = 'calc(100vh - 100px)'
        this[`${side}Width`] ='25%'

      }

      this[`is${side.charAt(0).toUpperCase() + side.slice(1)}Collapsed`] =
        !this[`is${side.charAt(0).toUpperCase() + side.slice(1)}Collapsed`];
    },
  }
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.map-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

.chart-container {
  height: calc(100vh - 100px);
  position: absolute;
  top: 20px;
  bottom: 20px;
  background: rgba(18,169,131, 0.6);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  border: 5px solid rgba(19,172,134,0.8);
  animation: boxAnimation 6s infinite;
  z-index: 2;

}

@keyframes boxAnimation {
  0% {
    border-color: rgba(0, 255, 0, 0.8);
  }
  50% {
    border-color: rgba(19,172,134,0.8);
  }
  100% {
    border-color: #21706A;
  }
}
.left-chart {
  left: 20px;
  width: 400px;
  background-image:linear-gradient(to left,rgba(19,172,134,0.7), #21706A);
}

.right-chart {
  right: 20px;
  width: 400px;
  background-image:linear-gradient(to right,rgba(19,172,134,0.7), #21706A);
}

.chart {
  width: 100%;
  height: calc(100% - 40px);
}

.chart-controls {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  border-bottom: 1px solid #eee;
}

button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}
button:hover {
  background: #f0f0f0;
}
</style>
